import React from 'react';
import { DeliveryFilter } from '../../types';
import { Search, X } from 'lucide-react';

interface RecordsFilterProps {
  onFilterChange: (filter: DeliveryFilter) => void;
}

export function RecordsFilter({ onFilterChange }: RecordsFilterProps) {
  const [orderNumber, setOrderNumber] = React.useState('');
  const [serialNumber, setSerialNumber] = React.useState('');
  const [status, setStatus] = React.useState<0 | 1 | 2>(2);  // 默认值为 2，表示“所有”
  const [deliveryDate, setDeliveryDate] = React.useState<Date | ''>('');

  const handleFilter = () => {
    onFilterChange({
      orderNumber: orderNumber, // 如果为空则传递 ""
      serialNumber: serialNumber, 
      status: status,
      deliveryDate: deliveryDate ? new Date(deliveryDate) : ''  // 确保空日期传递空字符串
    });
  };

  const clearFilters = () => {
    setOrderNumber('');
    setSerialNumber('');
    setStatus(2);
    setDeliveryDate('');
    onFilterChange({
      orderNumber: '',
      serialNumber: '',
      status: 2,
      deliveryDate: '',
    });
  };

  return (
    <div className="bg-white p-4 rounded-lg shadow-md">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div>
          <label className="block text-sm font-medium text-gray-700">订单号</label>
          <input
            type="text"
            value={orderNumber}
            onChange={(e) => setOrderNumber(e.target.value)}
            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
            placeholder="输入订单号"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700">机器人编号</label>
          <input
            type="text"
            value={serialNumber}
            onChange={(e) => setSerialNumber(e.target.value)}
            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
            placeholder="输入机器人编号"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700">状态</label>
          <select
            value={status}
            onChange={(e) => setStatus(Number(e.target.value) as 0 | 1 | 2)}  // 确保类型为 0 | 1 | 2
            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
          >
            <option value={2}>所有</option>  {/* 代表所有状态 */}
            <option value={0}>配送中</option>
            <option value={1}>已完成</option>
          </select>
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700">配送日期</label>
          <input
            type="date"  // 使用date类型确保精确到某一天
            value={deliveryDate ? (deliveryDate as Date).toISOString().split('T')[0] : ''}
            onChange={(e) => setDeliveryDate(e.target.value ? new Date(e.target.value) : '')}
            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
          />
        </div>
      </div>
      
      <div className="mt-4 flex justify-end gap-2">
        <button
          onClick={clearFilters}
          className="flex items-center px-3 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"
        >
          <X size={16} className="mr-1" />
          清除筛选
        </button>
        <button
          onClick={handleFilter}
          className="flex items-center px-3 py-2 bg-blue-500 text-white rounded-md text-sm font-medium hover:bg-blue-600"
        >
          <Search size={16} className="mr-1" />
          查询
        </button>
      </div>
    </div>
  );
}
